<template>
    <div class="movie-buy">
        <div
            v-if="isLoadingCinema||isLoadingMovie" 
            class="loading">
            <com-loading></com-loading>
        </div>
        <div v-if="!isLoadingCinema&&!isLoadingMovie">
            <div 
                class="mv-data"
                :style="{background:mvData.backgroundColor}">
                <!-- 返回首页/返回上一页 -->
                <div class="movie-info-header">
                    <div @click="gobackPage()">
                        <i class="bi bi-chevron-left"></i>返回
                    </div>
                    <router-link to='/'>
                        <i class="bi bi-house-door"></i> 首页
                    </router-link>
                </div>
                <div class="mv-data-container">
                    <div class="photo">
                        <img :src="mvData.img.replace('w.h','170.230')"
                            :style="{background:`url('${loadingImg}') 50% 50% no-repeat`,'background-size': '100% 100%'}"
                        alt="">
                    </div>
                    <div class="text">
                        <div class="title ">{{mvData.nm}}</div>
                        <div class="etitle">{{mvData.enm}}</div>
                        <div class="point">
                            <span v-if="!mvData.globalReleased">{{mvData.wish}} <b>人想看</b> </span>
                            <span v-if="mvData.globalReleased&&mvData.sc>0">{{mvData.sc}} <b>分</b></span>
                            <span v-if="mvData.globalReleased&&mvData.sc<=0">暂无评分</span>
                        </div>
                        <div class="mv-date">
                            {{mvData.pubDesc}}
                        </div>
                        <div class="scm">
                            {{mvData.scm}}
                        </div>
                    </div>
                </div>
            </div>
            <!-- 放映的电影院 -->
            <div class="cinemas">
                <div class="title">放映的电影院</div>
                <ul>
                    <li
                        v-for='item in cinemaList'
                        :key="newSymbol(item.id)"
                        @click="gotoPage(item.id)">
                        <!-- 电影院名字 -->
                        <div class="cinemaNm shortTxt">
                            {{item.name}} 
                            <span>{{item.sellPrice}} <b>元起</b></span>
                        </div>
                        <!-- 电影院地址 -->
                        <div class="cinema-loc shortTxt">
                            {{item.addr}}
                        </div>
                        <!-- 电影院的服务 -->
                        <div class="cinema-serive shortTxt">
                            <span
                                v-for="item2 in item.labels"
                                :key="newSymbol(item2.name)"
                                :style="{color:item2.color,'border-color':item2.color}">
                                {{item2.name}}
                            </span>
                        </div>
                        <!-- 电影院活动 -->
                        <div class="cinema-discount shortTxt">
                            {{item.showTimes}}
                        </div>
                    </li>
                    <li v-if="cinemaList==undefined||cinemaList.length==0">
                        无电影院放映
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import comLoading from '@/components/comLoading.vue'
export default {
    name: 'movieBuy',
    data() {
        return {
            cityId : '',
            mid : '',
            isLoadingMovie: true,
            isLoadingCinema: true,
            cinemaList: [], // 播放该电影的电影院
            mvData:[], // 电影信息
            loadingImg: require('@/assets/img/loading2.gif'),
        }
    },
    components: {
        comLoading
    },
    methods: {
        // 查询电影在哪个电影院上映
        mvSearchCinema(mid, cityId) {
            var date = new Date();
            // console.log(date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate());
            var dateString = date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate();
            this.axios
                .get('https://apis.netstart.cn/maoyan/movie/select/cinemas'
                    +'?limit=20&offset=0&client=iphone&channelId=4&'
                    +'showDate='+dateString+'&movieId='+mid+'&sort=distance'
                    +'&cityId='+cityId+'&lat=23.135610180010865&lng=113.42416693422547&districtId=-1&lineId=-1&areaId=-1&stationId=-1&brandIds=%5B-1%5D&serviceIds=%5B-1%5D&hallTypeIds=%5B%22all%22%5D&languageIds=%5B%22all%22%5D&dimIds=%5B%22all%22%5D')
                .then((success)=>{
                    // console.log(success);
                    if(success.data!=undefined &&success.data.cinemas!=undefined){
                        this.cinemaList = success.data.cinemas;
                    }
                    this.isLoadingCinema = false;
                    console.log('this.cinemaList',this.cinemaList);
                })
                .catch((err)=>{
                    console.log(err);
                })
        },
        // 加载电影信息
        loadMvData() {
            this.axios
                .get('https://apis.netstart.cn/maoyan/movie/intro?movieid='+this.mid)
                // .get('/maoyanData/movieBuy.json')
                .then((success)=>{
                    // console.log(success);
                    this.mvData = success.data.movie;
                    // console.log('mvData',this.mvData);
                    this.isLoadingMovie = false;
                })
                .catch((err)=>{
                    console.log(err);
                })
        },
        newSymbol() {
            return Symbol();
        },
        gobackPage() {
            this.$router.go(-1);
        },
        gotoPage(cinemaId) {
            this.$router.push('/cinema_detail/'+cinemaId+'/required/'+this.mid);
        }
    },
    mounted() {
        // console.log('this.$route',this.$route.params);
        this.cityId = this.$route.params.cid;
        this.mid = this.$route.params.mid;
        this.mvSearchCinema(this.mid,this.cityId);
        this.loadMvData();
    }
}
</script>

<style lang="scss" scoped>
@import '@/assets/common/variable.scss';
.loading {
    position: fixed;
    width: 100%;
    height: 100%;
}
.movie-info-header {
    padding: 20px 15px 10px 15px;
    font-size: 20px;
    display: flex;
    justify-content: space-between;
    color: white;
    a {
        color: white;
    }
}
.mv-data-container {
    display: flex;
    width: 100%;
    overflow: hidden;
    padding: 15px;
    padding-bottom: 40px;
    margin-bottom: -25px;
    box-sizing: border-box;
    .photo {
        img {
            width: 100px;
            height: 136px;
            margin-right: 10px;
        }
    }
    .text {
        width: 230px;
        font-size: 14px;
        color: rgb(214, 214, 214);
        &>div {
            margin-bottom: 6px;
        }
    }
    .title {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 10px;
        color: white;
    }
    .point {
        color: $fontColor2;
        font-size: 18px;
        font-weight: bold;
        b {
            font-size: 14px;
        }
    }
}
.cinemas {
    width: 100%;
    box-sizing: border-box;
    border-radius: 16px;
    box-shadow: 0px 10px 10px 10px white;
    overflow: hidden;
    background-color: white;
    &> .title {
        padding: 15px;
        padding-bottom: 0;
    }
    li {
        overflow: hidden;
        padding: 20px 0px;
        margin: 0 15px;
        border-bottom: 1px solid #888;
        margin-bottom: -2px;
        font-size: 16px;
        &>div {
            width: 100%;
        }
    }
    .cinemaNm {
        font-size: 18px;
        font-weight: bold;
        span {
            margin-left: 10px;
            color: #F03D43;
        }
    }
    .cinema-loc,
    .cinema-serive,
    .cinema-discount {
        font-size: 14px;
        color: #888;
        margin-top: 8px;
    }
    .cinema-serive {
        span {
            font-size: 12px;
            display: inline-block;
            padding: 0px 3px;
            margin-right: 4px;
            border: 1px solid #888;
            border-radius: 3px;
        }
        .hallType,
        .endorse {
            color: #589DAF;
            border-color: #589DAF;
        }
        .snack,
        .vipTag {
            color: #FF9900;
            border-color: #FF9900;
        }
    }
}
</style>